@atlaskit/analytics-next

What is @atlaskit/analytics-next?

@atlaskit/analytics-next is a package designed to help developers integrate analytics into their applications. It provides tools for tracking user interactions, creating custom analytics events, and managing analytics contexts. This package is particularly useful for applications that require detailed user behavior tracking and reporting.

What are @atlaskit/analytics-next's main functionalities?

Creating Custom Analytics Events

This feature allows developers to create custom analytics events. The code sample demonstrates how to create a new UIAnalyticsEvent with specific payload attributes and log it to the console.

const { AnalyticsListener, UIAnalyticsEvent } = require('@atlaskit/analytics-next');

const handleClick = () => {
  const event = new UIAnalyticsEvent({
    payload: {
      action: 'clicked',
      actionSubject: 'button',
      attributes: {
        componentName: 'MyButton',
        packageName: '@atlaskit/analytics-next',
        packageVersion: '1.0.0'
      }
    }
  });
  console.log(event);
};

handleClick();

Tracking User Interactions

This feature allows developers to track user interactions with components. The code sample shows how to wrap a button component with analytics events, so that a custom event is fired when the button is clicked.

const { withAnalyticsEvents } = require('@atlaskit/analytics-next');

const Button = ({ createAnalyticsEvent }) => (
  <button
    onClick={() => {
      const event = createAnalyticsEvent({
        action: 'clicked',
        actionSubject: 'button'
      });
      event.fire('atlaskit');
    }}
  >
    Click me
  </button>
);

const TrackedButton = withAnalyticsEvents()(Button);

Managing Analytics Contexts

This feature allows developers to manage analytics contexts, providing additional metadata for analytics events. The code sample demonstrates how to wrap a component with an AnalyticsContext to include contextual data.

const { AnalyticsContext } = require('@atlaskit/analytics-next');

const MyComponent = () => (
  <AnalyticsContext data={{ componentName: 'MyComponent' }}>
    <button onClick={() => console.log('Button clicked')}>Click me</button>
  </AnalyticsContext>
);

Other packages similar to @atlaskit/analytics-next

react-ga

react-ga is a package for integrating Google Analytics with React applications. It provides a simple API for tracking page views and custom events. Compared to @atlaskit/analytics-next, react-ga is more focused on Google Analytics integration and may not offer the same level of customization for analytics events.

mixpanel-browser

mixpanel-browser is a package for integrating Mixpanel analytics with web applications. It provides tools for tracking user interactions, creating custom events, and analyzing user behavior. Compared to @atlaskit/analytics-next, mixpanel-browser is specifically designed for Mixpanel and offers advanced features for user behavior analysis.

README

Analytics-next

Tools for tracking interactions with UI components. Easily capture UI context and state when these events occur.

Installation

yarn add @atlaskit/analytics-next

Usage

Detailed docs and example usage can be found here.